<template>
    <div class="classify">
        <Myhead title="发现">
            <router-link to="/publish">发布游记</router-link>
        </Myhead>
        <template v-if="list.length > 0">
            <!-- <router-link :to="{ name: 'particular', query: { id:item._id } }" > -->
            <div class="hot-recommend" @click="particulars(item._id, item.hot)" v-for="(item, index) in list" :key="index">
                <h2>
                    {{ item.title }}
                </h2>
                <p>
                    <van-icon name="chat-o">
                        {{ item.address }}
                    </van-icon>
                </p>

                <p class="time">
                    <van-icon name="chat-o">
                        {{ item.time }}
                    </van-icon>
                    <van-icon name="chat-o">
                        热度 : {{ item.hot }}
                    </van-icon>
                </p>
                <div class="lable">
                    <van-tag v-for="tag, index in item.tags" :key="index" type="primary">
                        {{ tag.label }}
                    </van-tag>
                </div>
                <div v-for="v, i in item.imgs" :key="i">
                    <div>
                        <van-image class="recommend-image" :src="v.url" />
                    </div>
                </div>
                <div>
                    <p>{{ item.content }}</p>
                </div>

            </div> <!-- </router-link> -->
        </template>
        <template v-else>
            <div class="empty">
                <van-empty image-size="300" image="https://bpic.51yuansu.com/pic3/cover/00/62/60/5897e9b200b14_610.jpg"
                    description="暂无数据" />
                <p class="empty-p">记得添加我们自己的旅游日记哦,请点击左上角</p>
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showFailToast } from 'vant'
import { getmytravelsAPI, changetravelsAPI } from './findapi'
import { useRouter } from 'vue-router';

let router = useRouter()
let list = ref([])

const particulars = async (id, hot) => {
    router.push({ name: 'particulars', query: { id: id } })
    await changetravelsAPI({
        _id: id,
        hot: hot + 1
    })
}
let bsURL = 'http://81.69.235.62:3000'
const getmytravels = async () => {
    let res = await getmytravelsAPI()
    if (res.data.code == 200) {
        let array = res.data.result
        array.forEach((item) => {
            item.imgs.forEach(v => {
                v.url = v.url.replace('public', bsURL)
            })
            list.value.push(item)
        });
    } else {
        showFailToast('获取数据失败')
    }
}

onMounted(() => {
    getmytravels()
})
</script>

<style lang="scss" scoped>
.classify {
    // height: 100%;
    background-color: #f6f6f6;
    // margin-top: 10px;
    // padding-bottom: 40px;
}

.empty {
    padding: 150px 0;

    .van-empty {
        padding-bottom: 20px;
    }

    &-p {
        text-align: center;
        font-size: 15px;
        color: #969799;
    }
}

.hot-recommend {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    margin-top: 10px;

    .time {
        display: block;
        display: flex;
        justify-content: space-between;
    }

    p {
        margin-top: 10px;
    }

    .lable {
        .van-tag {
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }

    .recommend-image {
        .van-image__img {
            width: "95%";
            height: '1000px'
        }

    }

    .recommend-images {
        width: "200px";
        height: '500px'
    }

}
</style>